<template>
    <div>
          <el-container>
            <el-header>采购明细管理界面</el-header>
            <el-container>
                <el-aside style="border: 5px solid #eee">
                    <el-menu>
                       
                        <el-submenu index="1">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>基本信息管理</span>
                            </template>

                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/cus">
                                   <el-menu-item index="1-1">客户管理</el-menu-item>
                                </router-link>
                                <router-link to="/goods">
                                   <el-menu-item index="1-2">商品管理</el-menu-item>
                                </router-link>
                                <router-link to="/emp">
                                    <el-menu-item index="1-3">员工管理</el-menu-item>
                                </router-link> 
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>采购信息管理</span>
                            </template>
                            
                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/mainBuy">
                                    <el-menu-item index="2-1">采购主表管理</el-menu-item>
                                </router-link>
                                <router-link to="/payDetail">
                                    <el-menu-item index="2-2">采购明细管理</el-menu-item>
                                </router-link>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-button type="primary" round @click="dialogVisible1=true">查询信息</el-button>
                    <el-dialog
                    title="查询采购明细"
                    :visible.sync="dialogVisible1"
                    width="20%"
                    >
                        <el-form>
                        <el-form-item label="请输入采购明细id">
                            <el-input v-model="askDetail.pdid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible1 = false,select(askDetail.pdid)">确 定</el-button>
                        </span>
                    </el-dialog>


                    <el-dialog
                    title="查询明细结果"
                    :visible.sync="selectRes"

                    width="75%"
                    >
                       <!--  <el-form>

                        <el-form-item label="采购明细id:">
                            {{askDetail.pdid}}
                        </el-form-item>
                        <el-form-item label="采购清单:">
                            {{askDetail.pid}}
                        </el-form-item>
                        <el-form-item label="商品编号:">
                            {{askDetail.gid}}
                        </el-form-item>
                        <el-form-item label="采购数量:">
                            {{askDetail.pcount}}
                        </el-form-item>
                        <el-form-item label="商品单价:">
                            {{askDetail.gpay}}
                        </el-form-item>   
                        <el-form-item label="商品总价:">
                            {{askDetail.total}}
                        </el-form-item>
                        <el-form-item label="备注:">
                            {{askDetail.other}}
                        </el-form-item>
                        </el-form> -->
                         <el-table v-bind:data="tmptb" border stripe style="width: 100%">
                        <el-table-column prop="pdid" label="采购清单id" width="150" ></el-table-column>
                        <el-table-column prop="pid" label="采购清单" width="150" ></el-table-column>
                        <el-table-column prop="gid" label="商品编号" width="150" ></el-table-column>
                        <el-table-column prop="pcount" label="采购数量" width="150"></el-table-column>
                        <el-table-column prop="gpay" label="商品单价" width="150" ></el-table-column>
                        <el-table-column prop="total" label="商品总价" width="150" ></el-table-column>
                        <el-table-column prop="other" label="备注" width="150" ></el-table-column>  
                        </el-table>
                        <el-button @click="selectRes = false">退出</el-button>
                    
                    </el-dialog>




                    <el-button type="primary" round @click="dialogVisible2 = true">删除信息</el-button>
                    <el-dialog
                    title="删除采购明细"
                    :visible.sync="dialogVisible2"
                    width="20%"
                    >
                        <el-form>
                        <el-form-item label="请输入采购清单id">
                            <el-input v-model="rmDetail.pdid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible2 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible2 = false,remove()">确 定</el-button>
                        </span>
                    </el-dialog>








                    <el-button type="primary" round @click="dialogVisible3= true">修改采购明细信息</el-button>
                    <el-dialog
                    title="修改采购明细信息"
                    :visible.sync="dialogVisible3"
                    width="20%"
                    >
                        <el-form>
                            <el-form-item label="请输入采购明细id">
                            <el-input v-model="updateDetail.pdid"></el-input>
                            </el-form-item>
                        </el-form>
                        
                        <span slot="footer" >
                            <el-button @click="dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisible = true,select1(updateDetail.pdid)">确 定</el-button>

                        <el-dialog
                        :visible.sync="updateVisible"
                        title='修改采购清单'
                        width="25%"
                        >
                           
                            <el-form>
                                <!-- <el-form-item label="输入修改后的采购明细id">
                                <el-input v-model="updateDetail.PDid"></el-input>
                                </el-form-item>
                     -->

                                <el-form-item label="输入修改后的采购清单">
                                <el-input v-model="updateDetail.pid"></el-input>
                                </el-form-item>
                            
                            
                                <el-form-item label="输入修改后的商品编号">
                                <el-input v-model="updateDetail.gid"></el-input>
                                </el-form-item>
                            
                           
                                <el-form-item label="输入修改后的采购数量">
                                <el-input v-model="updateDetail.pcount"></el-input>
                                </el-form-item>
                            

                          
                                <el-form-item label="输入修改后的商品单价">
                                <el-input v-model="updateDetail.gpay"></el-input>
                                </el-form-item>
                           

                            
                                <el-form-item label="输入修改后的商品总价">
                                <el-input v-model="updateDetail.total"></el-input>
                                </el-form-item>
                            

                            
                                <el-form-item label="输入修改后的备注">
                                <el-input v-model="updateDetail.other"></el-input>
                                </el-form-item>
                            </el-form>


                            <span slot="footer" >
                            <el-button @click="updateVisible = false,dialogVisible3 = false">取 消</el-button>
                            <el-button type="primary" @click="updateVisible = false,dialogVisible3 = false,update()">确 定</el-button>
                            </span>
                        </el-dialog>
                    </span>
                </el-dialog>





                    <el-button type="primary" round @click="dialogVisible4= true">添加信息</el-button>
                    <el-dialog
                    title="添加采购明细信息"
                    :visible.sync="dialogVisible4"
                    width="20%"
                    >
                    <el-form>
                    <el-form-item label="请输入采购明细id">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.pdid"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入采购清单">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入商品编号">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.gid"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="请输入商品编号">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.gid"></el-input>
                    </el-form-item> -->
                    <el-form-item label="请输入采购数量">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.pcount"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入商品单价">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.gpay"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入商品总价">
                        <span style="color:red">此为必填项</span>
                        <el-input v-model="addDetail.total"></el-input>
                    </el-form-item>
                    <el-form-item label="请输入备注">
                        <el-input v-model="addDetail.other"></el-input>
                    </el-form-item>
                    </el-form>
                    
                    <span slot="footer" >
                    <el-button @click="dialogVisible4 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible4 = false,add()">确 定</el-button>
                    </span>
                </el-dialog>


                    <el-button type="primary" round @click="csv()">导出表格</el-button>
                    <el-table v-bind:data="detailData" border stripe style="width: 100%">
                      <el-table-column prop="pdid" label="采购清单id" width="150" ></el-table-column>
                      <el-table-column prop="pid" label="采购清单" width="150" ></el-table-column>
                      <el-table-column prop="gid" label="商品编号" width="150" ></el-table-column>
                      <el-table-column prop="pcount" label="采购数量" width="150"></el-table-column>
                      <el-table-column prop="gpay" label="商品单价" width="150" ></el-table-column>
                      <el-table-column prop="total" label="商品总价" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>  
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data:function(){
        return{
            askDetail: {
            pdid:'',
            pid:'',
            gid:'',
            pcount:'',
            gpay:'',
            total:'',
            other:''
        }, 
        addDetail: {
            pdid:'',
            pid:'',
            gid:'',
            pcount:'',
            gpay:'',
            total:'',
            other:''
        },
        updateDetail: {
            pdid:'',
            pid:'',
            gid:'',
            pcount:'',
            gpay:'',
            total:'',
            other:''
        }, 
        rmDetail: {
            pdid:'',
            pid:'',
            gid:'',
            pcount:'',
            gpay:'',
            total:'',
            other:''
        },
            detailData:[/* {
                pdid:'',
                pid:'',
                gid:'',
                pcount:'',
                gpay:'',
                total:'',
                other:''
            } */],
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            updateVisible: false,
            editVisible1: false,
            editVisible2: false,
            editVisible3: false,
            editVisible4: false,
            editVisible5: false,
            editVisible6: false,
            editVisible7: false,
            selectRes: false,
            tmptb: []

        }
    },methods: {
    //展示所有数据
    selectAll() {
      var that = this;
      axios.get("/TbPayDetailSelectAll").then(function (result) {
        if (result.data.code == 1) {
          that.detailData = result.data.data; //result.data获取统一的json对象
          //result.data.data获取json对象中的属性data值
        } else {
          alert(result.data.msg);
        }
      });
    },
    //查
    select(PDid) {
      var that = this;
      axios({
            method: "get",
            url: "/TbPayDetailSelectByPDid/"+PDid,
        }).then(result => {
          if(result.data.code==1){
            alert("查询成功");
            that.askDetail = result.data.data;
            that.tmptb[0]=that.askDetail;
             this.selectRes = true;
          }else{
            that.$message.error(result.data.msg);
          }
        })
    },
    select1(PDid) {
      var that = this;
      axios({
            method: "get",
            url: "/TbPayDetailSelectByPDid/"+PDid,
        }).then(result => {
          if(result.data.code==1){
            alert("查询成功");
            this.updateDetail = result.data.data;
            this.updateVisible = true;
          }else{
            that.$message.error(result.data.msg);
          }
        })
    },
    //增加
    add() {
      var that = this;
      axios.post("/TbPayDetailInsert",this.addDetail).then(function (result) {
         if (result.data.code==1){
              that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible4=false;
            //重新加载表格数据
            that.selectAll();
        }else {
            that.$message.error(result.data.msg);
        }
      });
      /* axios({
            method: "post",
            url: "/TbEmployeeInsert",
            params: this.addEmp
        }).then(result => {
         if (result.data.code==1){
              that.$message.success(result.data.msg);
            //关闭对话框
            that.dialogVisible4=false;
            //重新加载表格数据
            that.selectAll();
          }else {
              that.$message.error(result.data.msg);
          }
        }) */
    },
    //删除
    remove() {
      //提示框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
        }).then(() => {
            //通过axios调用我们的删除接口
            var that = this;
            axios.delete("/TbPayDetailDelete/"+ that.rmDetail.pdid).then(function (result){
                if (result.data.code==1){
                    //1.弹出一个信息
                    that.$message.success(result.data.msg);
                    //2.重新加载表格数据
                    that.selectAll();
                }else {
                    //弹出一个信息
                    that.$message.error(result.data.msg)
                }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    },
    update(){
      var that = this;
      // this.updateEmp = this.select(this.updateEmp.eid);
      axios.post("/TbPayDetailUpdate", this.updateDetail).then(function (result) {
          if (result.data.code == 1) {
            
              that.$message.success(result.data.msg);
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
          } else {
              that.$message.error(result.data.msg);
          }
      })
    },csv(){
       /*axios.get("/TbEmployeeExport") .then(function () {
          if (result.data.code == 1) {
              that.$message.success(result.data.msg);
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
          } else {
              that.$message.error(result.data.msg);
          }
      }) */
    window.location.href = 'http://localhost:8083/TbPayDetailExport'


    window.open('http://localhost:8083/TbPayDetailExport', '_self'); // _self参数设置是为了不跳转到新界面上去
    let link = document.createElement('a')
        link.href = 'http://localhost:8083/TbPayDetailExport'
        link.download = '下载文件名册'
        link.click()


    }
    },
    mounted() {
        axios.get('/TbPayDetailSelectAll').then((result) => {
            var that = this;
            if (result.data.code == 1) {
              that.$message.success(result.data.msg);
              this.detailData=result.data.data;
              //关闭对话框
              that.Visible = false;
              //重新加载表格数据
              that.selectAll();
              
          } else {
              that.$message.error(result.data.msg);
          }
        });
    },
    created() {
     this.selectAll();
    },
}
</script>


<style>
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>